import React from 'react'
// import { Switch, Route, Redirect } from 'react-router-dom'
import Loadable from 'react-loadable'
import MainMenu from '@/components/menus/MainMenu'

// import InnerPlugin from '@/views/contents/InnerPlugin'
// import ComponentA from '@/views/contents/ComponentA'
// import ComponentB from '@/views/contents/ComponentB'

import './MainView.less'

const InnerPlugin = Loadable({
  loader: () => import('@/views/contents/InnerPlugin'),
  loading() { return <div></div> }
})

const ComponentA = Loadable({
  loader: () => import('@/views/contents/ComponentA'),
  loading() { return <div></div> }
})

const ComponentB = Loadable({
  loader: () => import('@/views/contents/ComponentB'),
  loading() { return <div></div> }
})

class MainView extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      activatedTabs: [],
      selectedTabId: null
    }
  }

  onAddTab = async (tabId) => {
    try{
      if(!this.state.activatedTabs.includes(tabId)) {
        await this.setState(prevState => {
          return {
            activatedTabs: [...prevState.activatedTabs, tabId],
            selectedTabId: tabId,
          }
        })
      } else {
        await this.setState(prevState => {
          return { selectedTabId: tabId }
        })
      }
    } catch(e) {
      console.error(e)
    } 
  }

  onSwitchTab = async (tabId) => {
    try{
      await this.setState(prevState => {
        return { selectedTabId: tabId }
      })
    }catch(e) {
      console.error(e)
    }
  }

  onRemoveTab = async (tabId) => {
    try{
      if(this.state.selectedTabId !== tabId) {
        let restTabs = this.state.activatedTabs.filter((item) => {
          return item !== tabId
        })
        await this.setState(prevState => {
          return { activatedTabs: restTabs }
        })
        return
      }
      let length = this.state.activatedTabs.length
      let index = this.state.activatedTabs.indexOf(tabId)
      if(index === 0 && length === 1) {
        await this.setState(prevState => {
          return {
            activatedTabs: [],
            selectedTabId: null
          }
        })
      } else if(index === length - 1 && length > 1) {
        let nextId = this.state.activatedTabs[index - 1]
        let restTabs = this.state.activatedTabs.filter((item) => {
          return item !== tabId
        })
        await this.setState(prevState => {
          return {
            activatedTabs: restTabs,
            selectedTabId: nextId
          }
        })
      } else if(index < length - 1 && length > 1) {
        let nextId = this.state.activatedTabs[index + 1]
        let restTabs = this.state.activatedTabs.filter((item) => {
          return item !== tabId
        })
        await this.setState(prevState => {
          return { 
            activatedTabs: restTabs,
            selectedTabId: nextId
          }
        })
      }
    }catch(e) {
      console.error(e)
    }
  }

  render () {
    return (
      <div className="main-wrap">
        <section className="menu-wrap">
          <p className="cabin-logo"></p>
          <MainMenu onAddTab={ (tabId) => { this.onAddTab(tabId) } }></MainMenu>
        </section>
        <section className="content-wrap">
          <nav className="nav-wrap">
            {
              this.state.activatedTabs.map((item) => {
                return (
                  <p className={ `nav-item ${ this.state.selectedTabId === item ? 'active' : null }` } key={ item } onClick={ () => { this.onSwitchTab(item) } }>
                    { item }
                    <i className="delete-i" onClick={ (e) => { e.stopPropagation(); this.onRemoveTab(item) } }>×</i>
                  </p>
                )
              })
            }
          </nav>
          <div className="content-main">
            {
              this.state.activatedTabs.includes('inner-plugin') ?
              <InnerPlugin selectedTabId={ this.state.selectedTabId }></InnerPlugin> : null
            }
            {
              this.state.activatedTabs.includes('component-a') ?
              <ComponentA selectedTabId={ this.state.selectedTabId }></ComponentA> : null
            }
            {
              this.state.activatedTabs.includes('component-b') ?
              <ComponentB selectedTabId={ this.state.selectedTabId }></ComponentB>: null
            }
            
          </div>
        </section>
      </div>
    )
  }
}

export default MainView